<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>场地转让列表</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 搜索 -->
        <el-form :inline="true" style="margin-top: 20px;">
            <el-form-item>
                <el-input size="small" v-model="address" placeholder="请输入地址"></el-input>
            </el-form-item>
            <el-form-item>
                <el-select size="small" v-model="status" placeholder="请选择转让状态">
                    <el-option v-for="item in options1" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-select size="small" v-model="state" placeholder="请选择审核状态">
                    <el-option v-for="item in options2" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
            </el-form-item>
            <el-form-item>
                <el-button size="small" type="primary" icon="el-icon-search" @click="chongzhi">重置</el-button>
            </el-form-item>
        </el-form>

        <!-- 列表 -->
        <el-table size="small" ref="multipleTable" :data="siteData" element-loading-text="拼命加载中" style="width: 100%;"
            v-horizontal-scroll>
            <el-table-column align="center" sortable type="index" label="序号"></el-table-column>
            <el-table-column align="center" sortable prop="name" label="场地名称" width="120"></el-table-column>
            <el-table-column align="center" sortable prop="longitude" label="经度" width="120"></el-table-column>
            <el-table-column align="center" sortable prop="latitude" label="纬度" width="120"></el-table-column>
            <el-table-column align="center" sortable prop="address" label="地址" width="120"></el-table-column>
            <el-table-column align="center" sortable prop="type" label="类型" :formatter="Type"
                width="120"></el-table-column>
            <el-table-column align="center" sortable prop="userName" label="真实姓名" width="120"></el-table-column>
            <el-table-column align="center" sortable prop="sfz" label="身份证号" width="120"></el-table-column>
            <el-table-column align="center" sortable prop="tel" label="联系方式" width="120"></el-table-column>
            <el-table-column align="center" sortable prop="certificate" label="场地所有权证明" width="130">
                <template slot-scope="scope">
                    <el-image v-if="scope.row.certificate" style="width: 60px;" :src="scope.row.certificate"
                        :preview-src-list="[scope.row.certificate]"></el-image>
                    <div v-if="scope.row.certificate == null">暂无图片</div>
                </template>
            </el-table-column>
            <el-table-column align="center" sortable prop="companyName" label="企业名" width="120"></el-table-column>
            <el-table-column align="center" sortable prop="creditCode" label="统一信用代码" width="120"></el-table-column>
            <el-table-column align="center" sortable prop="businessLicense" label="营业执照" width="120">
                <template slot-scope="scope">
                    <el-image v-if="scope.row.businessLicense" style="width: 50px;" :src="scope.row.businessLicense"
                        :preview-src-list="[scope.row.businessLicense]"></el-image>
                    <div v-if="scope.row.businessLicense == null">暂无图片</div>
                </template>
            </el-table-column>
            <el-table-column align="center" sortable prop="num" label="车位数" width="120"></el-table-column>
            <el-table-column align="center" sortable prop="status" label="转让状态" :formatter="Status"
                width="120"></el-table-column>
            <el-table-column align="center" sortable prop="state" label="审核状态" :formatter="State"
                width="120"></el-table-column>
            <el-table-column align="center" sortable prop="rent" label="租金" width="120">
                <template slot-scope="scope">
                    <div>{{ scope.row.rent / 100 }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" sortable prop="createTime" label="创建时间" width="150">
                <template slot-scope="scope">
                    <div>{{ transformDate(scope.row.createTime) }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="120" fixed="right">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="upFeed(scope.row)"
                        v-if="scope.row.state === 0">审核转让</el-button>
                    <el-button size="mini" type="info" disabled v-else>已审核</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 更新状态 -->
        <el-dialog title="更新审核转让界面" :visible.sync="editFormUpStatus" width="20%">
            <span>审核转让：</span>
            <el-select v-model="isGengxin" placeholder="请选择审核状态">
                <el-option v-for="item in options3" :key="item.value" :label="item.label"
                    :value="item.value"></el-option>
            </el-select>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click='closeUpFeed()'>取消</el-button>
                <el-button size="small" type="primary" :loading="loading" @click="upFeedStatus()">确定</el-button>
            </div>
        </el-dialog>

        <!-- 分页组件 -->
        <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
    </div>
</template>

<script>
import Pagination from '../../components/Pagination'
import {
    getAdminVenuesList,
    aduitVenues
} from "../../api/userMG";
export default {
    data() {
        return {
            // 分页参数
            pageparm: {
                currentPage: 1,
                pageSize: 20,
                total: 10
            },
            siteData: [],
            loading: false,
            options: [{
                value: 0,
                label: '个人'
            }, {
                value: 1,
                label: '企业'
            }],
            options1: [{
                value: 0,
                label: '转让中'
            }, {
                value: 1,
                label: '转让成功'
            }],
            options2: [{
                value: 0,
                label: '待审核'
            }, {
                value: 1,
                label: '审核通过'
            }, {
                value: 2,
                label: '审核不通过'
            }],
            options3: [{

                value: 1,
                label: '审核通过'
            }, {
                value: 2,
                label: '审核不通过'
            }],
            editFormUpStatus: false,
            isGengxin: '',
            address: '',
            state: '',
            status: '',
        }
    },
    created() {
        this.getdata(Number(localStorage.getItem("ZhuanCDPage")) || 1);
    },
    // 注册组件
    components: {
        Pagination
    },
    methods: {
        // 场地类型
        Type: function (row) {
            if (row.type == 0) {
                return "个人"
            } else if (row.type == 1) {
                return "企业"
            }
        },
        // 审核状态
        State: function (row) {
            if (row.state == 0) {
                return "待审核"
            } else if (row.state == 1) {
                return "审核通过"
            } else if (row.state == 2) {
                return "审核不通过"
            }
        },
        // 转让状态
        Status: function (row) {
            if (row.status == 0) {
                return "转让中"
            } else if (row.status == 1) {
                return "转让成功"
            }
        },
        // 分页插件事件
        callFather(parm) {
            this.pageparm.page = parm.currentPage
            this.getdata(parm.currentPage)
        },
        // 修改更新状态
        upFeedStatus() {
            let data = {
                id: this.id,
                state: this.isGengxin,
            }
            aduitVenues(data).then((res) => {
                if (res.code == 200) {
                    this.editFormUpStatus = false
                    this.$message.success(res.msg)
                    localStorage.setItem("ZhuanCDPage", this.pageparm.currentPage);
                    location.reload()
                } else {
                    this.editFormUpStatus = false
                    this.$message.error(res.msg);
                }
            })
        },
        // 关闭修改对话框
        closeUpFeed() {
            this.editFormUpStatus = false
            this.$message({
                type: 'info',
                message: '已取消修改'
            })
        },
        // 打开更新状态编辑页
        upFeed(row) {
            this.editFormUpStatus = true;
            this.id = row.id;
            return
            var userdata = JSON.parse(localStorage.getItem("userdata"))
            this.$prompt('请输入密码', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /^(?!(\s+$))/,
                inputErrorMessage: '不可以空数据提交!'
            }).then(({ value }) => {
                if (value === userdata.menuTwo) {
                    this.editFormUpStatus = true;
                    this.id = row.id;
                } else {
                    this.$message({
                        type: 'error',
                        message: '密码错误'
                    });
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消输入'
                });
            });
        },
        // 状态处理
        isChuli: function (row) {
            if (row.status == 0) {
                return "待处理"
            } else if (row.status == 1) {
                return "已处理"
            }
        },
        // 搜索数据
        search() {
            this.getdata(1)
        },
        // 重置数据
        chongzhi() {
            this.state = ''
            this.status = ''
            this.address = ''
            this.getdata(1)
        },
        // 获取数据
        getdata(page) {
            this.loading = true;
            // 获取反馈列表
            var parameter = {
                page: (page - 1) * 20,
                address: this.address,
                state: this.state,
                status: this.status,
            };
            getAdminVenuesList(parameter).then((res) => {
                this.loading = false;
                if (res.code != 200) {
                    this.$Message({
                        type: "info",
                        message: res.msg,
                    });
                } else {
                    this.siteData = res.data.list;
                    this.pageparm.currentPage = page;
                    this.pageparm.total = res.data.count;
                    return;
                }
            })
        },
    }
}
</script>

<style></style>